<template>
	<view class="p-b-80 m-b-80 ">
		<view class="bgc-white h-100 position-fixed left-0 right-0 top-0 z-index-9">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="p-t-100">
			<!-- 有数据时显示订单列表 -->
			<view v-if="orders && orders.length > 0">
				<view class="w-670 h-450 m-t-40  m-b-28 m-l-40 m-r-40 position-retive" v-for="(item,index) in orders" :key="index"
				@click="handleOrderClick(item)">
					<image src="https://www.shuyunpt.com/app/image//order/bg.png" class="w-670 h-476" ></image>
					<view class="position-absolute left-0 right-0 top-0 bottom-0 p-l-24 p-r-28">
						<view class="h-82 b-b d-flex-items-center c-title">
							{{item.service_name}}
						</view>
						<view class="d-flex-items-center d-flex-between m-t-15">
							<view class="c-33 ">{{item.order_no}}</view>
							<!-- <view class="item-1">挂单中</view> -->
						</view>
						<view class="m-t-25 d-flex">
							<view class="w-165 h-165 br-20 overflow_h">
								<image :src="item.service_image" class="w-165 h-165"></image>
							</view>
							<view class="f-24 c-77 m-l-20 w-400">
								<view class="m-b-6">联系人：{{item.contact_name}}</view>
								<view class="m-b-6">地址：{{item.address}}</view>
								<view class="m-b-6">下单时间：{{item.order_time}}</view>
								<view class="m-b-6">服务时间：{{item.service_time}}</view>
							</view>
						</view>
						<view class="d-flex-between d-flex-items-center m-t-15">
							<view>
								<text class="f-20 c-77">标的金额：</text>
								<text class="f-20 c-F85639">￥</text>
								<text class="f-40 c-F85639">{{item.price}}</text>
							</view>
							<view class="detail-btn">查看详情</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 无数据时显示空状态 -->
			<view v-else class="empty-container">
				<view class="empty-text">暂无订单数据</view>
				<view class="empty-desc">您还没有相关订单，快去下单吧~</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部',
					value:""
				},{
					name: '未支付',
					value:"0"
				}, {
					name: '待施工',
					value:"1"
				}, {
					name: '已完工',
					value:"2"
				}, {
					name: '待评价',
					value:"3"
				}],
				current: 0,
				orders:[]
			};
		},
		onLoad(){
			// 检查登录状态，如果未登录则不调用接口
			if (this.$store.state.loginStatic) {
				this.getList()
			}
		},
		onShow(){
			let _this= this;
			// 监听orderType事件，用于接收从其他页面传递的订单类型
			uni.$once('orderType',function(data){
				console.log('接收到orderType事件:', data);
				// 根据type设置对应的tab
				if(data == 4){
					_this.current = 4; // 待评价
				}else if(data >= 0 && data <= 3){
					_this.current = data;
				}
				
				// 检查登录状态，如果未登录则不调用接口
				if (_this.$store.state.loginStatic) {
					_this.getList()
				}
			})
		},
		methods: {
			async getList(){
				const res = await this.$service({
					url:"/api/member.order//getOrderList",
					data:{
						order_status:this.list[this.current].value
					}
				})
				console.log(res);
				this.orders = res.data.order_list
			},
			change(index) {
				this.current = index;
				this.getList()
			},
			handleOrderClick(item) {
				// 根据订单状态决定跳转路径
				if (item.order_status == 0) {
					// 未支付状态，跳转到订单详情页
					this.$jump.navigateTo('/pages/order/detail?order=' + item.order_no);
				} else {
					// 其他状态，跳转到分项进度页
					this.$jump.navigateTo('/pages/order/item?order=' + item.order_no);
				}
			}
		},
	};
</script>


<style scoped>
	.c-title{
		font-size: 28rpx;
		color: #487DF4;
		font-weight: 600;
	}
	.item-1{
		width: 100rpx;
		height: 40rpx;
		background:#DFE2FF;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(167,180,196,0.2);
		border-radius: 80rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #5C64FF;
		line-height: 40rpx;
		text-align: center;
	}
	.detail-btn{
		width: 168rpx;
		height: 68rpx;
		background: linear-gradient( 269deg, #6DB1FF 0%, #5C64FF 100%);
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(167,180,196,0.2);
		border-radius: 80rpx 80rpx 80rpx 80rpx;
		text-align: center;
		line-height: 68rpx;
		color:#fff;
	}
	.c-F85639{
		color:#F85639;
	}
	
	/* 空状态样式 */
	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 200rpx 40rpx;
		text-align: center;
	}
	
	.empty-image {
		width: 300rpx;
		height: 300rpx;
		margin-bottom: 40rpx;
	}
	
	.empty-text {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 20rpx;
	}
	
	.empty-desc {
		font-size: 28rpx;
		color: #999;
		line-height: 1.5;
	}
</style>